<template>
  <div>
    <div class="bottonMargin">
      <el-date-picker
        v-model="gmtCreatedRange"
        type="datetimerange"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="(value) => changeDate(value, 'gmtCreated')"
      />
      <el-button @click="getInfo">查询</el-button>
      <span>注：双击表格选择所需商品信息</span>
    </div>
    <vxe-table
      border
      :loading="loading"
      align="center"
      :data="explosiveData"
      height="340"
      @cell-dblclick="explosiveClick"
    >
      <vxe-table-column>
        <vxe-table-column
          field="shipmentName"
          title="入驻商"
          min-width="150"
          sortable
        />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.shipmentName"
            placeholder="入驻商"
            clearable
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="groupGoodCode"
          title="商品编码"
          min-width="150"
          sortable
        />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.goodCode"
            placeholder="商品编码"
            clearable
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="groupGoodsName"
          title="商品名称"
          min-width="150"
          sortable
        />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.goodsName"
            placeholder="商品名称"
            clearable
          />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="groupQuantity"
          title="件数"
          min-width="120"
          sortable
        />
        <template v-slot:header="{ column }">
          <el-input v-model="listQuery.quantity" placeholder="件数" clearable />
        </template>
      </vxe-table-column>
      <vxe-table-column>
        <vxe-table-column
          field="deliveryTotalNum"
          title="订单数"
          min-width="190"
          sortable
        />
        <template v-slot:header="{ column }">
          <el-input
            v-model="listQuery.deliveryTotalNumStart"
            placeholder="下限"
            clearable
            type="number"
            style="width: 45%"
          />
          -
          <el-input
            v-model="listQuery.deliveryTotalNumEnd"
            placeholder="上限"
            clearable
            type="number"
            style="width: 45%"
          />
        </template>
      </vxe-table-column>
    </vxe-table>
    <vxe-pager
      :current-page.sync="listQuery.pageNum"
      :page-size.sync="listQuery.pageSize"
      :total="listQuery.total"
      :layouts="[
        'PrevJump',
        'PrevPage',
        'Number',
        'NextPage',
        'NextJump',
        'Sizes',
        'FullJump',
        'Total',
      ]"
      :page-sizes="[20, 30, 50, 100]"
      @page-change="handlePageChange"
    />
  </div>
</template>

<script>
import { waveQueryHotGoods } from "@/api/outStorage";

export default {
  name: 'ExplosiveInquire',
  data() {
    return {
      explosiveData: [],
      listQuery: {
        total: 0,
        pageNum: 1,
        pageSize: 20,
        deliveryTotalNumEnd: "",
        deliveryTotalNumStart: "",
        quantity: "",
        goodCode: "",
        goodName: "",
        shipmentName: "",
      },
      gmtCreatedRange:'',
      loading: false,
    };
  },
  created() {
    this.handleCreatedRange('hui-xian')
    setTimeout(() => this.getInfo())
  },
  methods: {
    handleCreatedRange(type) {
      if (!type && this.gmtCreatedRange !== '') {
        localStorage.setItem('termofvalidity', Date.now())
        localStorage.setItem('gmtCreatedRange', JSON.stringify(this.gmtCreatedRange))
      } else {
        const termofvalidity = localStorage.getItem('termofvalidity')
        const gmtCreatedRange = localStorage.getItem('gmtCreatedRange')
        if (termofvalidity && gmtCreatedRange && new Date(parseInt(termofvalidity)).toDateString() === new Date().toDateString()) {
          this.gmtCreatedRange = JSON.parse(gmtCreatedRange)
          this.changeDate(this.gmtCreatedRange, 'gmtCreated')
        }
      }
    },
    getInfo() {
      let rLoading;
      // this.loading = true
      let clock = setInterval(() => {
        rLoading = this.openLoading()
      }, 500)
      waveQueryHotGoods(this.listQuery).then((res) => {
        this.explosiveData = res.data.records;
        this.listQuery.total = res.data.total;
      }).finally(() => {
        clearInterval(clock);
        this.loading = false
        rLoading && rLoading.close() // 关闭遮罩层
      })
    },
    handlePageChange({ currentPage, pageSize }) {
      this.listQuery.pageNum = currentPage;
      this.listQuery.pageSize = pageSize;
      this.getInfo();
    },
    explosiveClick(value) {
      this.$emit("explosive", value.row);
    },
    changeDate(value, prefix) {
      if (value) {
        this.listQuery[`${prefix}Start`] = value[0]
        this.listQuery[`${prefix}End`] = value[1]
        this.handleCreatedRange()
      } else {
        this.listQuery[`${prefix}Start`] = ''
        this.listQuery[`${prefix}End`] = ''
      }
    },
  },
};
</script>

<style scoped>
.bottonMargin {
  margin-bottom: 12px;
}
</style>
